<!--
 * @Author: your name
 * @Date: 2021-10-17 19:36:45
 * @LastEditTime: 2021-10-17 20:44:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\functionPage\jsoneditor\index.vue
-->
<template>
    <Row :gutter="[10, 10]">
        <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 5 }">
            <Card>
                <Form>
                    <FormItem label="语言">
                        <Select
                            :default-value="codeLangs[0]"
                            style="width: 100%"
                            @change="handleChange1"
                        >
                            <SelectOption
                                v-for="(item, index) in codeLangs"
                                :key="index"
                                :value="item"
                            >
                                {{ item }}
                            </SelectOption>
                        </Select>
                    </FormItem>
                    <FormItem label="主题">
                        <Select
                            :default-value="codeThemes[0]"
                            style="width: 100%"
                            @change="handleChange2"
                        >
                            <SelectOption
                                v-for="(item, index) in codeThemes"
                                :key="index"
                                :value="item"
                            >
                                {{ item }}
                            </SelectOption>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="dashed" block @click="saveImg">保存为图片</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="dashed" block @click="savePdf">保存为PDF</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="dashed" block @click="saveTxt">保存为TXT</Button>
                    </FormItem>
                </Form>
            </Card>
        </Col>
        <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 19 }">
            <div class="codecontent">
                <v-datax
                    ref="editor"
                    theme-name="ayu-dark"
                    @handleSave="handleSaves"
                ></v-datax>
            </div>
        </Col>
    </Row>
</template>

<script>
import { defineComponent, ref, toRaw } from 'vue'
import VDatax from './component/datax.vue'
import { Card, Row, Col, Form, Button } from 'ant-design-vue'
import { codeLang, codeTheme } from './component/conf'
import { HtmlToPdf } from './component/htmltopdf'

export default defineComponent({
    name: 'Asd',
    components: {
        VDatax,
        Card,
        Row,
        Col,
        Form,
        FormItem: Form.Item,
        Button,
    },
    setup() {
        let objs = {
            scale: 1,
        }
        let editor = ref()
        let codeLangs = toRaw(codeLang)
        let codeThemes = toRaw(codeTheme)
        let codeValue = ref()
        const handleSaves = (e) => {
            codeValue.value = e
        }
        const changeTheme = () => {}
        // 更改语言
        const handleChange1 = (e) => {
            editor.value.setLang(e)
        }
        // 更改主题
        const handleChange2 = (e) => {
            editor.value.setTheme(e)
        }
        // 保存为图片
        const saveImg = () => {
            const topdf = new HtmlToPdf(objs)
            topdf.createCanvas().saveImg('img')
        }
        // 保存为pdf--暂停使用
        const savePdf = () => {
            //   const topdf = new HtmlToPdf(objs);
            //   topdf.createCanvas().savePdf("img");
        }
        // 保存为txt
        const saveTxt = () => {
            const topdf = new HtmlToPdf(objs)
            topdf.createCanvas().savetxt(codeValue.value)
        }
        return {
            handleSaves,
            changeTheme,
            handleChange1,
            handleChange2,
            editor,
            codeLangs,
            codeThemes,
            savePdf,
            saveTxt,
            saveImg,
        }
    },
})
</script>

<style></style>
